.et-modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;

  .et-modal-wrapper {
    display: table-cell;
    position: relative;
    top: 10rem;

    .et-modal-container {
      width: 25rem;

      @include breakpoint(small only) {
        width: 20rem;
      }

      margin: 0px auto;
      background-color: $white;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
      transition: all .3s ease;

      .et-modal-header {
        display: block;
        line-height: 2.5rem;
        padding: 0 1rem;
        border-bottom: 1px solid $light-gray;

        &.alert {
          i {
            color: $alert-color;
          }
        }

        i, span {
          vertical-align: middle;
        }

        i {
          font-size: 1.25rem;
          margin-right: 0.5rem;
        }

        span {
          font-weight: bold;
        }
      }

      .et-modal-body {
        padding: 2rem 1rem;
        font-size: 0.875rem;
      }

      .et-modal-footer {
        border-top: 1px solid $light-gray;
        background-color: $light-gray;

        .button {
          background-color: $et-dark-gray;
          color: $white;
          font-size: 0.875rem;

          &.primary {
            background-color: $primary-color;
            color: $white;

            &:hover {
              background-color: scale-color($primary-color, $lightness: -50%);
              color: $white;
            }
          }

          &:hover {
            background-color: scale-color($et-dark-gray, $lightness: -50%);
          }
        }
      }
    }
  }
}

/*
 * The following styles are auto-applied to elements with
 * transition="et-modal" when their visibility is toggled
 * by Vue.js.
 */
.et-modal-enter {
  opacity: 0;
}

.et-modal-leave-active {
  opacity: 0;
}

.et-modal-enter .et-modal-container,
.et-modal-leave-active .et-modal-container {
  transform: scale(1.1);
}
